<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>
	<script src= "angular/angular.min.js"></script>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="ng-table/dist/ng-table.min.js"></script>
	<link rel="stylesheet" href="ng-table/dist/ng-table.min.css">
	
</head>
<body>

<div ng-app="hiveclientApp" ng-controller="ExampleController"> 
<p><strong>Page:</strong> {{tableParams.page()}}</p>
<p><strong>Count per page:</strong> {{tableParams.count()}}</p>
 
<p>Datos de Hadoop:</p>

<table ng-table="tableParams" class="table table-hover table-bordered table-condensed">
<thead>
	<tr>
		<td ng-repeat="h in records[0]">
		<b>{{ h }}</b>
		</td>
	</tr>
</thead>
<tbody>
  <tr ng-repeat="row in $data">
<!--   	
  	<td data-title="'sessionid'">{{ row[0] }}</td>
-->  	
  	<td ng-repeat="field in headers">
  		{{ row[field] }}
  	</td> 
  </tr>
</tbody>  
</table>


</div>

<script>
	var app = angular.module('hiveclientApp', ['ngTable'])
	.controller("ExampleController",function($scope, $http, ngTableParams) {	
	    $http.get("http://localhost:3000/records")
	    .success(function (data) {
	    	$scope.records = data;
	    	
	    	$scope.headers = [];
	    	for (var i = 0; i < data[0].length; i++)
	    		$scope.headers.push(i);
	    	
	    	$scope.tableParams = new ngTableParams({
	    		page: 1,
	    		count: 5
	    	},{
	    		total: data.length,
	    		getData: function ($defer, params) {
	                $defer.resolve(data.slice(1) // quitamos la primera fila, ya que en este caso no es de datos, sino de nombres de columnas
	                		.slice((params.page() - 1) * params.count(), params.page() * params.count()));
	    		}
	    	});	    	
	    });
	});
</script>

</body>
</html>
